<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-10-21 15:32:24
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-10-27 19:05:30
-->
<template>
  <div class="index">
    <van-nav-bar title="首页"></van-nav-bar>

    <div class="index_content">
      <van-sidebar v-model="active">
        <van-sidebar-item :title="c.name" v-for="c in cps" :key="c.id" />
      </van-sidebar>
      <div class="product_list_container">
        <!-- 栏目产品信息 -->
        <div v-for="cp in cps" :key="cp.id">
          <div class="category_name">{{cp.name}}</div>
          <ul class="product_list">
            <li class="product" v-for="p in cp.products" :key="p.id">
              <div class="photo"><img :src="p.photo" alt=""></div>
              <div class="details">
                <div class="name">{{p.name}}</div>
                <div class="price">
                  ￥{{p.price}}/ {{p.unit?p.unit:'例'}}
                  <div class="stepper_btn">
                    <van-stepper 
                      :min="0"
                      integer 
                      theme="round"
                      button-size="18px"
                      input-width="24px"
                      :show-minus="p.num>0"
                      :show-input="p.num>0"
                      :default-value='0' 
                      v-model="p.num" />
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>

        <div class="bottom_line">-----我是有底线的-----</div>
      </div>
      <div class="shopcart_container" v-if="cart.total > 0">
        <div class="shopcart">
          <div class="icon">
            <span><van-icon name="shopping-cart-o" size="20" /></span>
            <span class="num">{{cart.num}}</span>
          </div>
          <div class="total">{{cart.total}}</div>
          <div class="submit" @click="toConfirmOrderHandler">结算</div>
        </div>
      </div>
    </div>
    
  </div>
</template>
<script>
import {onMounted, ref,computed} from 'vue'
import {useRouter} from 'vue-router'
import {get} from '../../utils/request'
export default {
  setup() {
    let active = ref(0)
    let cps = ref([]) // 分类及产品
    let router = useRouter();

    let loadCategoryProducts = async ()=>{
      let url = "/app/product/queryCategoryWithProducts"
      let resp = await get(url);
      cps.value = resp.data;
    }
    // {num:,total:}
    let cart = computed(()=>{
      let result = {num:0,total:0}
      cps.value.forEach(cp => {
        cp.products.forEach(p=>{
          result.total += p.num * p.price;
          result.num += p.num;
        })
      });
      return result;
    })

    let toConfirmOrderHandler = ()=>{
      let orderLines = [];
      cps.value.forEach((cp)=>{
        cp.products.forEach(p=>{
          if(p.num>0){
            orderLines.push(p)
          }
        })
      })
      router.push({
        name:'confirm_order',
        params:{orderLines:JSON.stringify(orderLines)}
      })
    }

    onMounted( async ()=>{
      await loadCategoryProducts();
    })


    return {
      active,
      cps,
      cart,
      toConfirmOrderHandler
    }
  },
}
</script>

<style lang="scss" scoped>
.index_content {
  display: flex;
  .shopcart_container {
    position: fixed;
    bottom: 60px;
    width: 100%;
   .shopcart {
      width: 90%;
      height: 50px;
      margin: 0 auto;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 25px;
      overflow: hidden;
      display: flex;
      & > div {
        line-height: 50px;
      }
      .icon {
        flex-basis: 50px;
        text-align: center;
        position: relative;
        .icon-shop-cart- {
          font-size: 30px;
        }
        .num {
          position: absolute;
          right: 0;
          top: 0;
          background-color: #ee0a24;
          color: #fff;
          line-height: 20px;
          width: 20px;
          border-radius: 50%;
        }
      }
      .total {
        flex: 1;
      }
      .submit {
        background-color:#ee0a24;
        color: #fff;
        text-align: center;
        width: 80px;
      }
   }
  }
  .product_list_container {
    flex:1;
    background: #fff;
    padding: 0 .5em;
    .category_name {
      line-height: 3em;
    }
    .bottom_line {
      text-align: center;
      font-size: 12px;
      padding: 2em 0;
      color: #999;
    }

    padding-bottom: 200px;
    .product_list {
      .product {
        padding: .5em 0;
        border-bottom: 1px solid #f4f4f4;
        display: flex;
        .photo {
          width: 100px;
          height:80px;
          overflow: hidden;
          img {
            height:100%
          }
        }
        .details {
          flex: 1;
          padding-left:.5em;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          position: relative;
          .stepper_btn {
            position: absolute;
            bottom: 4px;
            right: .2em;
          }
        }
      }
    }
  }
}
</style>